:root {
  --font-size-small: 11px;
  --font-size-normal: 12px;
  --font-size-large: 14px;
  --color-primary: black;
  --color-secondary: #202124;
  --color-error: #ed4e4c;
  --border-color: #cdcdcd;
  --bg-color-primary: #fff;
  --bg-color-secondary: #f5f5f5;
  --bg-color-row-hover: #ebebeb;
  --bg-color-error-row-selected: #fbd1cf;
  --bg-color-primary-tab-selected: #dadada;
  --bg-color-secondary-tab-selected: transparent;
  --bg-color-radiobutton-selected: #dadce0;
  --bg-color-toolbar: #f1f3f4;
}

@media (prefers-color-scheme: dark) {
  :root {
    --color-primary: #ffffff;
    --color-secondary: #bdc6cf;
    --border-color: #3c3d3c;
    --bg-color-primary: #1f1f1f;
    --bg-color-secondary: #242529;
    --bg-color-row-hover: #30303091;
    --bg-color-error-row-selected: #48181a;
    --bg-color-primary-tab-selected: #474747;
    --bg-color-secondary-tab-selected: black;
    --bg-color-radiobutton-selected: #454545;
    --bg-color-toolbar: #252629;
  }
}

body {
  margin: 0;
  background-color: var(--bg-color-primary);
}

html,
body,
#root {
  height: 100%;
  width: 100%;
}

.devtools-tabs.ant-tabs {
  height: 100%;

  .ant-tabs-tab {
    font-size: var(--font-size-normal);
    color: var(--color-secondary);
    height: 36px;

    &.ant-tabs-tab-active {
      background: var(--bg-color-primary-tab-selected);

      .ant-tabs-tab-btn {
        color: var(--color-primary);
      }
    }
  }

  > .ant-tabs-content-holder > .ant-tabs-content > .ant-tabs-tabpane {
    padding-left: 0;
  }

  .ant-tabs-content {
    height: 100%;
    line-height: initial;

    .ant-tabs-tabpane {
      height: 100%;
    }
  }
}

.property-row {
  word-break: break-all;
  margin-bottom: 8px;
  line-height: var(--rq-font-size-normal);
}
